<template>
    <div id="cafe-filter">
        <div class="grid-container" v-show="show">
            <div class="grid-x grid-padding-x">
                <span class="show-filters" v-on:click="show = !show">{{ show ? '隐藏过滤器 ↑' : '显示过滤器 ↓' }}</span>
            </div>
            <div class="grid-x grid-padding-x">
                <!--名称,地址,城市-->
                <div class="large-6 medium-6 small-12 cell">
                    <label>搜索</label>
                    <input type="text" placeholder="搜索" v-model="textSearch"/>
                </div>
                <!--标签-->
                <div class="large-6 medium-6 small-12 cell">
                   <tag-input v-bind:unique="'cafe-search'"></tag-input>
                </div>
                <!--roaster-->
                <div class="is-roaster-container">
                    <input type="checkbox" v-model="isRoaster"><label>是否为烘焙屋</label>
                </div>
                <!--冲泡方法-->
                <div class="brew-methods-container">
                    <div class="filter-brew-method" v-for="method in cafeBrewMethods"
                         v-on:click="toggleBrewMethod(method.method)"
                         v-bind:class="{'active':brewMethods.indexOf(method.method)>-1}">
                        {{method.method}}
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import TagInput from "../global/forms/TagInput";
    import { EventBus } from "../../event-bus";

    export default {
        name: "CafeFilter",
        data(){
            return {
                textSearch:'',
                isRoaster:false,
                tags:[],
                brewMethods:[],
                show:true,
            }
        },
        components:{
            TagInput,
        },
        mounted() {
            EventBus.$on('tags-edited',function (tagsEdited) {
                if(tagsEdited.unique == 'cafe-search'){
                    this.tags = tagsEdited.tags;
                }
            }.bind(this))
        },
        computed:{
            cafeBrewMethods(){
                return this.$store.getters.getBrewMethods;
            }
        },
        methods:{
            toggleBrewMethod(brewMethod){

                if(this.brewMethods.indexOf(brewMethod) > -1){
                    this.brewMethods.splice(this.brewMethods.indexOf(brewMethod),1);
                }else {
                    this.brewMethods.push(brewMethod);
                }
            },
            updateCafeFilter(){
                EventBus.$emit('filters-updated',{
                    text:this.textSearch,
                    tags:this.tags,
                    roaster:this.isRoaster,
                    brew_methods:this.brewMethods
                })
            },
        },
        watch:{
            textSearch(){
                this.updateCafeFilter();
            },
            tags(){
                this.updateCafeFilter();
            },
            isRoaster(){
                this.updateCafeFilter();
            },
            brewMethods(){
                this.updateCafeFilter();
            }
        }
    }
</script>

<style lang="scss">
    @import '~@/abstracts/_variables.scss';

    div.filter-brew-method{
        display: inline-block;
        height: 35px;
        text-align: center;
        border: 1px solid #ededed;
        border-radius: 5px;
        padding-left: 10px;
        padding-right: 10px;
        padding-top: 5px;
        padding-bottom: 5px;
        margin-right: 10px;
        margin-top: 10px;
        cursor: pointer;
        color: $dark-color;
        font-family: 'Josefin Sans', sans-serif;

        &.active{
             border-bottom: 4px solid $primary-color;
         }
    }
    span.show-filters{
        display: block;
        margin: auto;
        color: $dark-color;
        font-family: 'Josefin Sans', sans-serif;
        cursor: pointer;
        font-size: 14px;
    }
</style>
